<template>
  <div id="debtorAudit">
    <c-title :hide="false" text="售后审核"></c-title>
    <van-tabs v-model="active" @change="tapchange">
      <van-tab title="待审核"></van-tab>
      <van-tab title="已审核"></van-tab>
    </van-tabs>
    <div class="listBox">
      <div class="lis" v-for="(item, index) in listData" :key="index">
        <div class="top">
          <div class="topTxt">
            <div class="topTxt_left" v-if="item.has_one_order">
              {{ item.has_one_order.order_sn }}
            </div>
            <div class="topTxt_Right">{{ item.status_name }}</div>
          </div>
          <div class="topTxt topTxt2" v-if="item.has_one_refund_apply">
            <div class="topTxt_left">
              {{ item.has_one_refund_apply.refund_type_name }}
            </div>
            <div
              class="topTxt_Right"
              v-if="
                item.has_one_refund_apply.refund_type == 0 ||
                item.has_one_refund_apply.refund_type == 1
              "
            >
              退款金额：￥{{ item.has_one_refund_apply.price }}
            </div>
          </div>
        </div>
        <div class="bottom">
          <template v-if="active == 0">
            <div class="agree" @click="refundExamine(1, item)">同意申请</div>
            <div class="reject" @click="refundExamine(2, item)">驳回申请</div>
          </template>
          <template v-if="active == 1">
            <div class="reject" @click="refundExamine(3, item)">查看详情</div>
          </template>
        </div>
      </div>
      <view
        v-if="listData.length == 0"
        style="text-align: center; line-height: 1rem; color: #999;"
        >暂无更多</view
      >
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 0,
      listData: [],
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.listData = [];
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
    },
    tapchange() {
      this.init();
      this.getData();
    },
    refundExamine(key, item) {
      let status;
      if (key == 1) {
        status = 1;
      } else if (key == 2) {
        status = 2;
      } else if (key == 3) {
        this.$router.push(
          this.fun.getUrl("aftersalesDebt", {
            refund_id: item.refund_id,
            debt: 4,
          })
        );
        return;
      }
      $http
        .get(
          "plugin.debt-shop.frontend.debtor.refundExamine",
          { status: status, id: item.id },
          "加载中"
        )
        .then((response) => {
          if (response.result === 1) {
            Toast(response.msg);
            this.init();
            this.getData();
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getData() {
      let json;
      if (this.active == 0) {
        json = 0;
      } else {
        json = ["1", "-1", "-2"];
      }
      $http
        .post(
          "plugin.debt-shop.frontend.debtor.refundList",
          { status: json },
          "加载中"
        )
        .then((response) => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.page = 1;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.listData = response.data.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json;
        if (this.active == 0) {
          json = 0;
        } else {
          json = ["1", "-1", "-2"];
        }
        $http
          .post(
            "plugin.debt-shop.frontend.debtor.refundList",
            {
              status: json,
              page: that.page,
            },
            "加载中"
          )
          .then(
            (response) => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.listData = this.listData.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.listBox {
  padding: 0.63rem;

  .lis {
    padding: 0.84rem 0.81rem 0.56rem 0.84rem;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 0.31rem;

    .bottom {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 0.63rem;

      .reject {
        width: 4.69rem;
        height: 1.75rem;
        border-radius: 0.88rem;
        border: solid 0.03rem #f15353;
        font-size: 0.69rem;
        color: #f15353;
        text-align: center;
        line-height: 1.75rem;
      }

      .agree {
        width: 4.69rem;
        height: 1.75rem;
        background-color: #f15353;
        border-radius: 0.88rem;
        text-align: center;
        line-height: 1.75rem;
        font-size: 0.69rem;
        color: #fff;
        margin-right: 0.94rem;
      }
    }

    .top {
      padding-bottom: 0.78rem;
      border-bottom: 1px solid #f0f0f0;

      .topTxt {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .topTxt_left {
          font-size: 0.81rem;
          color: #6d6d6d;
        }

        .topTxt_Right {
          font-size: 0.81rem;
          color: #f15353;
        }
      }

      .topTxt2 {
        margin-top: 0.8rem;

        .topTxt_left {
          font-size: 0.81rem;
          color: #6d6d6d;
        }

        .topTxt_Right {
          font-size: 0.81rem;
          color: #2f2f2f;
        }
      }
    }
  }
}
</style>
